<template>
    <div class="marquee-container">
      <div class="marquee-content">
        <!-- 原始内容 -->
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        
        <!-- 复制一份相同内容（关键：无缝衔接） -->
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
        <div class="zi">石家庄世博会即将在正定新区召开2025/05/13</div>
        <div class="zi divider">------------------------------------------------</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      // 可选：动态计算动画时间（如果需要自适应内容高度）
      this.setAnimationDuration();
    },
    methods: {
      setAnimationDuration() {
        const content = document.querySelector('.marquee-content');
        const contentHeight = content.scrollHeight / 2; // 因为我们复制了一份内容
        const speed = 50; // 数值越小，滚动越快（单位：px/s）
        const duration = contentHeight / speed;
        
        content.style.animationDuration = `${duration}s`;
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .marquee-container {
    height: 200px; /* 限制显示区域高度 */
    overflow: hidden; /* 隐藏超出部分 */
    position: relative;
    margin-top: 20px;
    
  }
  
  .marquee-content {
    animation: scroll-up 20s linear infinite; /* 关键：无限滚动动画 */
    
    /* 悬停时暂停动画 */
    &:hover {
      animation-play-state: paused;
    }
  }
  
  .zi {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin-top: 3px;
    
    &.divider {
      color: rgba(255, 255, 255, 0.5); /* 分隔线半透明 */
    }
  }
  
  /* 关键帧动画：向上滚动 */
  @keyframes scroll-up {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%); /* 因为我们复制了一份内容，所以只需滚动50%高度 */
    }
  }
  </style>